<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>余姚四明山 - 谁不说俺家乡好</title>
    <style>
        /* 景点详情页面样式 */
        body {
            margin: 0;
            padding: 20px;
            background-color: #fff8dc;
            font-family: "Microsoft YaHei", "SimSun", serif;
            color: #333;
            line-height: 1.6;
        }
        
        .content-container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border: 1px solid #d2b48c;
        }
        
        /* 页面标题 */
        .page-title {
            text-align: center;
            color: #8B4513;
            font-size: 28px;
            margin-bottom: 20px;
            font-family: "SimSun", serif;
            border-bottom: 2px solid #8B4513;
            padding-bottom: 15px;
        }
        
        /* 景点图片 */
        .spot-main-image {
            width: 100%;
            max-height: 500px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 30px;
            border: 3px solid #d2b48c;
        }
        
        /* 景点信息 */
        .spot-info {
            margin-bottom: 30px;
        }
        
        .info-section {
            margin-bottom: 25px;
        }
        
        .section-title {
            color: #8B4513;
            font-size: 22px;
            margin-top: 0;
            margin-bottom: 15px;
            font-family: "SimSun", serif;
            border-left: 5px solid #8B4513;
            padding-left: 10px;
        }
        
        .section-content {
            text-indent: 2em;
            margin-bottom: 15px;
            color: #555;
        }
        
        /* 景点特色 */
        .spot-features {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .feature-card {
            flex: 1;
            min-width: 200px;
            background-color: #f8f4e6;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border: 1px solid #d2b48c;
        }
        
        .feature-title {
            color: #8B4513;
            font-size: 18px;
            margin-top: 0;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .feature-content {
            text-align: center;
            font-size: 14px;
        }
        
        /* 图片画廊 */
        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .gallery-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 6px;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
            border: 2px solid #d2b48c;
        }
        
        .gallery-image:hover {
            transform: scale(1.03);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* 中国传统装饰 */
        .chinese-pattern {
            height: 20px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" viewBox="0 0 40 20"><path d="M0,10 C10,0 30,0 40,10 C30,20 10,20 0,10 Z" fill="%23d2b48c"/></svg>');
            background-repeat: repeat-x;
            margin: 30px 0;
        }
        
        /* 返回按钮 */
        .back-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #8B4513;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
            margin-bottom: 20px;
        }
        
        .back-button:hover {
            background-color: #A0522D;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .content-container {
                padding: 20px;
            }
            
            .page-title {
                font-size: 24px;
            }
            
            .spot-main-image {
                max-height: 300px;
            }
            
            .feature-card {
                min-width: 100%;
            }
            
            .image-gallery {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            
            .gallery-image {
                height: 150px;
            }
        }
    </style>
</head>
<body>
    <div class="content-container">
        <a href="content.html" class="back-button">← 返回主页</a>
        
        <h1 class="page-title">余姚四明山</h1>
        
        <!-- 主要图片 -->
        <img src="../image/split-5.png" alt="余姚四明山全景" class="spot-main-image">
        
        <!-- 景点介绍 -->
        <div class="spot-info">
            <div class="info-section">
                <h2 class="section-title">景区简介</h2>
                <p class="section-content">四明山位于浙江省宁波市余姚市境内，是天台山脉的支脉，主峰金钟山海拔1018米。四明山因其大俞山峰顶有个"四窗岩"，日月星光可透过四个石窗洞照射进去，故称"四明山"。</p>
                <p class="section-content">四明山总面积达1300多平方公里，森林覆盖率高达82%，是浙东地区重要的生态屏障和水源涵养地，被誉为"浙东绿肺"。</p>
            </div>
            
            <div class="info-section">
                <h2 class="section-title">自然景观</h2>
                <p class="section-content">四明山自然风光秀美，有众多的溪流、瀑布、湖泊和奇峰异石。其中最著名的景点包括四窗岩、白水冲瀑布、丹山赤水、仰天湖等。</p>
                <p class="section-content">四明山的四季景色各异：春天，樱花、杜鹃花盛开，漫山遍野；夏天，绿树成荫，是避暑胜地；秋天，枫叶红遍，层林尽染；冬天，有时会银装素裹，分外妖娆。</p>
            </div>
            
            <div class="info-section">
                <h2 class="section-title">革命历史</h2>
                <p class="section-content">四明山是中国南方重要的革命老区，是浙东抗日根据地的中心区域。在抗日战争和解放战争时期，四明山地区的人民在中国共产党的领导下，进行了艰苦卓绝的斗争，为中国革命的胜利做出了重要贡献。</p>
                <p class="section-content">如今，四明山革命纪念馆、浙东抗日根据地旧址等红色旅游景点，成为了爱国主义教育的重要基地。</p>
            </div>
        </div>
        
        <div class="chinese-pattern"></div>
        
        <!-- 景点特色 -->
        <h2 class="section-title">四明山特色</h2>
        <div class="spot-features">
            <div class="feature-card">
                <h3 class="feature-title">生态环境</h3>
                <p class="feature-content">森林覆盖率高，空气清新，是天然氧吧</p>
            </div>
            
            <div class="feature-card">
                <h3 class="feature-title">革命老区</h3>
                <p class="feature-content">浙东抗日根据地，红色旅游胜地</p>
            </div>
            
            <div class="feature-card">
                <h3 class="feature-title">四季风光</h3>
                <p class="feature-content">春有樱花，夏可避暑，秋赏红叶，冬观雪景</p>
            </div>
        </div>
        
        <!-- 图片画廊 -->
        <h2 class="section-title">四明山风光</h2>
        <div class="image-gallery">
            <img src="../image/split-5.png" alt="四明山风光1" class="gallery-image">
            <img src="../image/split-6.png" alt="四明山风光2" class="gallery-image">
            <img src="../image/split-7.png" alt="四明山风光3" class="gallery-image">
            <img src="../image/split-8.png" alt="四明山风光4" class="gallery-image">
            <img src="../splits/split-1.png" alt="四明山风光5" class="gallery-image">
            <img src="../splits/split-2.png" alt="四明山风光6" class="gallery-image">
        </div>
    </div>
    
    <script>
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const contentContainer = document.querySelector('.content-container');
            contentContainer.style.opacity = '0';
            contentContainer.style.transition = 'opacity 0.8s ease';
            
            setTimeout(() => {
                contentContainer.style.opacity = '1';
            }, 200);
            
            // 图片画廊点击效果
            const galleryImages = document.querySelectorAll('.gallery-image');
            galleryImages.forEach((image, index) => {
                image.style.opacity = '0';
                image.style.transform = 'scale(0.9)';
                image.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                
                setTimeout(() => {
                    image.style.opacity = '1';
                    image.style.transform = 'scale(1)';
                }, 500 + index * 100);
            });
        });
    </script>
</body>
</html>